<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <div class="header-top">
            <div class="container">
                <div class="header-list">
                    <div class="header-left">
                        <span>客服热线: 400-800-XXXX</span>
                    </div>
                    <div class="header-right">
                        <span>具体 | 深入 | 清晰 | 直观</span>
                        <input type="text" placeholder="请输入内容">
                        <i class="iconfont icon-sousuo"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航栏 -->
    <nav>
        <div class="container">
            <div class="nav-list">
                <div class="nav-left">
                    <img src="images/itilogo.png" alt="">
                </div>
                <div class="nav-right">
                    <ul>
                        <li>首页</li>
                        <li>课程介绍</li>
                        <li>课程介绍</li>
                        <li>课程介绍</li>
                        <li>课程介绍</li>
                        <li>课程介绍</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div class="banner">
        <img src="images/banner-1.jpg" alt="">
    </div>
    <!-- 页面的主体部分 -->
    <main>
        <div class="container">
            <div class="part fn-textcenter pad50">
                <h3>深入对象的每一个属性和方法结合实操深入剖析</h3>
                <p class="pad30">让每位<mark>前端开发</mark>都能思路清晰，豁然开朗</p>
                <ul>
                    <li>
                        <img src="images/item1.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item2.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item3.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item4.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                </ul>
            </div>
            <div class="part fn-textcenter pad50">
                <h3>深入对象的每一个属性和方法结合实操深入剖析</h3>
                <p class="pad30">让每位<mark>前端开发</mark>都能思路清晰，豁然开朗</p>
                <ul>
                    <li>
                        <img src="images/item1.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item2.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item3.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                    <li>
                        <img src="images/item4.jpg" alt="">
                        <h3>vue实例经典</h3>
                        <p>手把手深入解读vue企业实战，让你的思路清晰起来，听课一小时，省时大半天</p>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 页面底部 -->
    <footer>
        <div class="footer">
            <div class="container">
                <div class="footer-left">
                    <p>解锁企业常用案例，手把手一一分解，涵盖：TAB切换、标签
                        多项选择框、表格增删改查、仓库数据录入系统、动态路由权限
                        管理、二级导航目录、分页组件封装、外卖点餐系统、无限级目录
                        树、vue组件封装及全局组件注册等。<br>
                        科技打造高质量课程！不忘初心砥砺前行
                    </p>
                    <div class="footer-button">
                        <button>登陆</button>
                        <button>注册</button>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>